<template>
	<view class="box">
		<uni-nav-bar left-icon="left" left-text="返回" title="添加居民"
		 height="100rpx" :border="false" @clickLeft="back" />
		<form >
			
				<view class="userinfo">
					<text class="userinfosize">居民信息</text>
				</view>
				<view class="info_box">
				<view class="info">
					<text class="infosize">楼栋房号</text>
					<!-- <view class="select">
						 <uni-data-select
						      v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view> -->
					<view class="inp">
						请选择楼栋信息
						<uni-icons type="right" class="icon"></uni-icons>
					</view>
					
				</view>
				
				<view class="info">
					<text class="infosize">姓名</text>
					<!-- <view class="select">
						 <uni-data-select
						      v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view> -->
					<view class="name">
						<input class="name_inp" type="text" placeholder="请填写姓名">
					</view>
				</view>
				
				<view class="info">
					<text class="infosize">身份证号</text>
					<!-- <view class="select">
						 <uni-data-select
						      v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view> -->
					<view class="card">
						<input class="card_inp" type="text" placeholder="请填写身份证号">
					</view>
				</view>
				
				<view class="info">
					<text class="infosize">性别</text>
					<!-- <view class="select">
						 <uni-data-select
						      v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view> -->
					<view class="inp">
						请选择性别
						<uni-icons type="right" class="icon"></uni-icons>
					</view>
				</view>
				
				<view class="info">
					<text class="infosize">联系电话</text>
					<!-- <view class="select">
						 <uni-data-select
						      v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view> -->
					<view class="card">
						<input class="card_inp" type="text" placeholder="请填写身份证号">
					</view>
				</view>
			</view>
			
			<view class="btn">
				<text class="btn_zi" @click="go" >提交</text>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		 data() {
		    return {
		      value: 1,
		      range: [
		        { value: 0, text: "篮球" },
		        { value: 1, text: "足球" },
		        { value: 2, text: "游泳" },
		      ],
		    };
		  },
		  methods: {
		    change(e) {
		      console.log("e:", e);
		    },
			go(){
				uni.navigateTo({
					url:'/pages/familyMember/familyMember'
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		  }
	}
</script>

<style lang="less">
	.box{
		width: 100%;
		height: 100%;
		// background-color: aqua;
		.info_box{
			height: 505rpx;
			// background-color: aquamarine;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.info{
				position: relative;
				border-bottom: 1rpx solid #ededed;
				.infosize{
					line-height: 100rpx;
					margin-left: 28rpx;
				}
				.name{
					position: absolute;
					top: 30rpx;
					right: 105rpx;
					.name_inp{
						width: 162rpx;
					}
				}
				.card{
					position: absolute;
					top: 30rpx;
					right: 73rpx;
					.card_inp{
						width: 262rpx;
					}
				}
				.inp{
					position: absolute;
					top: 30rpx;
					right: 75rpx;
				}
			}
		}
	}
	.userinfo{
		height: 72rpx;
		background-color: #f0f0f0;
		.userinfosize{
			line-height: 72rpx;
			margin-left:27rpx;
		}
	}
	.btn{
		height:76rpx;
		background-color: #5da5f1;
		margin-top: 112rpx;
		border-radius:34rpx;
		text-align: center;
		margin-left:119rpx;
		margin-right:119rpx;
		.btn_zi{
			font-size: 33rpx;
			color: #fff;
			line-height: 76rpx;
		}
	}
</style>
